<template>
  <div class="swiper-slide-container">
    <div class="swiper-container">
      <div class="slide-wrapper" ref="slide">
        <div class="slide-content">
          <div class="slide-page" v-for="(item, index) in lists" :key="`${item.nickname}_${index}`">
            <work-card-component @click="onClick(index)" @lock="onLock" :item="item"/>
          </div>
        </div>
      </div>
    </div>
    <van-button class="slide-btn slide-btn-left" @click="onSlidePrev"></van-button>
    <van-button class="slide-btn slide-btn-right" @click="onSlideNext"></van-button>
  </div>
</template>
<script>
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'
import { Button } from 'vant'
import WorkCardComponent from './WorkCardComponent.vue'
BScroll.use(Slide)
export default {
  components: {
    WorkCardComponent,
    [Button.name]: Button
  },
  props: {
    lists: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => []
    },
    autoplay: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    }
  },
  name: 'SwiperContainer',
  mounted () {
    this.init()
  },
  methods: {
    init () {
      if (!this.lists.length) return
      this.scroll = new BScroll(this.$refs.slide, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        bounce: false,
        probeType: 3,
        click: true,
        slide: {
          autoplay: this.autoplay
        }
      })
      this.scroll.on('scrollEnd', () => {
        this.$emit('change', this.scroll.getCurrentPage().pageX)
      })
    },
    onSlidePrev () {
      this.scroll && this.scroll.prev()
    },
    onSlideNext () {
      this.scroll && this.scroll.next()
    },
    onClick (index) {
      if (index === 0 && !!this.type) {
        this.$emit('click')
      }
    },
    onLock (isLock) {
      this.$emit('lock', isLock)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/mixin.scss";
.swiper-slide-container {
  @include wh(750, 909 + $addHeight);
  overflow: hidden;
  position: relative;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.slide-wrapper {
  border-radius: 28px;
  @include wh(605, 909 + $addHeight);
  background-size: 100% 100%;
  overflow: hidden;
  margin:  0 auto;
  font-size: 0;
  box-shadow: 10px 10px 37px rgba($color: #830c12, $alpha: 0.5);
}

.slide-content {
  height: 100%;
  white-space: nowrap;
}
.slide-page {
  border-radius: 20px;
  overflow: hidden;
  @include wh(607, 909 + $addHeight);
  position: relative;
  display: inline-block;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
.slide-btn {
  position: absolute;
  @include wh(34, 77);
  top: 0;
  bottom: 0;
  margin: auto 0;
  padding: 0;
  border: none;
  &.slide-btn-left {
    background: url(../assets/img/second/slide_arrow_left.png);
    background-size: 100% 100%;
    left: 16px;
  }
  &.slide-btn-right {
    background: url(../assets/img/second/slide_arrow_right.png);
    background-size: 100% 100%;
    right: 16px;
  }
}
</style>
